<template>
	<view>
		<!-- 顶部提示 -->
		<view class="top-title" v-if="isShowTopTitle">
			<text>{{title}}</text>
		</view>

		<view v-if="msgObjectData.type == 2">
			<!-- 好友红包 -->
			<redpkg-user @sendHbMsg="sendHbMsg"></redpkg-user>

		</view>
		<view v-else>
			<!-- 群聊红包 -->
			<!-- 1，顶部选择navbar -->
			<red-navbar :activeIndex="activeIndex" @changeActive="changeActive"></red-navbar>

			<!-- 2，群聊模板 -->
			<redpkgLuck :allUsers="groupUserNum" @sendHbMsg="sendHbMsg" @isShowTop="isShowTop" v-if="activeIndex == 1">
			</redpkgLuck>
			<redpkg-ordinary :allUsers="groupUserNum" @sendHbMsg="sendHbMsg" @isShowTop="isShowTop"
				v-if="activeIndex == 2"></redpkg-ordinary>
			<redpkg-exclusive @sendHbMsg="sendHbMsg" :groupId="msgObjectData.id"
				v-if="activeIndex == 3"></redpkg-exclusive>
		</view>


		<!-- 3，支付键盘 -->
		<pay-pop txt="支付密码" :pwdlength="6" ref="pay_pop" @pwd_e="pwdSend"></pay-pop>

	</view>
</template>

<script>
	//1，引入子组件
	import redNavbar from './child/red-navbar.vue'

	import redpkgLuck from './child/group/redpkg-luck.vue'
	import redpkgOrdinary from './child/group/redpkg-ordinary.vue'
	import redpkgExclusive from './child/group/redpkg-exclusive.vue'
	import redpkgUser from './child/user/redpkg-user.vue'

	import payPop from '@/components/apk/pay-pop/pay-pop.vue'

	//2，引入网络请求
	import {
		queryBalance
	} from '@/api/http/main/my/pay.js'

	import {
		queryGroupUsers
	} from '@/api/http/msg/group.js'

	import {
		sendPkg
	} from '@/api/http/msg/redpkg.js'

	import {
		getNowTime
	} from '@/utils/time/time.js'

	export default {
		components: {
			redNavbar,
			redpkgLuck,
			redpkgOrdinary,
			redpkgExclusive,
			payPop,
			redpkgUser
		},
		data() {
			return {
				//1，顶部选中
				activeIndex: 1,
				//顶部提示
				title: '红包个数不可超过当前群聊人数',
				isShowTopTitle: false,

				hbMsgInfo: {},
				//聊天对象信息
				msgObjectData: {},
				//我的信息
				userId: uni.getStorageSync('userId'),
				head: uni.getStorageSync('head'),
				nickname: uni.getStorageSync('nickname'),

				gruopUsers: [],
				groupUserNum: 0
			}
		},
		methods: {
			changeActive(id, item) {
				this.activeIndex = id
			},
			isShowTop(e) {
				this.isShowTopTitle = e
			},

			//查询群聊总人数
			queryGroupUsers() {
				var that = this
				queryGroupUsers(this.msgObjectData.id, '', '', '').then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}

					var groupUserList = res.data.busInfo
					//console.log(groupUserList)
					//排除自己
					for (var i = 0; i < groupUserList.length; i++) {
						if (groupUserList[i].userId == that.userId) {
							groupUserList.splice(i, 1)
							break
						}
					}

					this.gruopUsers = groupUserList
					this.groupUserNum = res.data.busInfo.length
					//this.isShowGroupUser = true
				})
			},

			//1，红包发送（余额比较）
			sendHbMsg(e) {
				//1，查询用户余额
				queryBalance().then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}

					//金额比较
					var balance = res.data.busInfo
					if (e.amount > balance) {
						return uni.$showMsg('您的余额不足！请先充值');
					}
					this.hbMsgInfo = e
					//输入密码
					this.$refs.pay_pop.Open()
				})
			},
			//2，密码判断
			pwdSend(e) {
				var req = this.hbMsgInfo
				req.pwd = e
				req.groupId = this.msgObjectData.id
				var that = this
				console.log(uni.myWebsocket
					.socketTask.readyState)
				if (uni.myWebsocket == undefined || uni.myWebsocket == '' || uni.myWebsocket == null || uni.myWebsocket
					.socketTask.readyState !== 1) {
					console.log("WebSocket未连接");
					//重新连接消息
					uni.$connectSocketInit.connectSocket(uni.$basePort)
					return uni.$showMsg('已重新连接，请重新发送')
				}

				//判断密码是否输入正确
				sendPkg(req).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					//返回得到红包id
					var redPkgId = res.data.busInfo

					//获取当前时间
					var nowTime = getNowTime() + ''

					//好友红包
					if (that.msgObjectData.type == 2) {
						//组装红包消息
						var redPkgMsg = req

						let msgData = {
							type: that.$chatType.CHAT_FRIEND,
							msg: {
								senderId: that.userId,
								senderHead: that.head, //头像
								types: '4', //消息类型 （0文本，1图片连接，2音频，3地图）
								message: JSON.stringify(redPkgMsg), //消息 
								time: nowTime,
								tip: 0,
								receiverId: that.msgObjectData.id + '',
								receiverHead: that.msgObjectData.head,
								receiverName: that.msgObjectData.nickname,
								senderName: that.nickname,
								redPkgId: redPkgId
							}
						}

						uni.myWebsocket.socketTask.send({
							data: JSON.stringify(msgData),
							async success() {
								//返回上一页
								return uni.navigateBack(1)
							},
							fail(e) {
								uni.$showMsg('发送失败！');
								//this.connectSocketInit()
							}
						});
					}

					//群聊发红包
					if (that.msgObjectData.type == 3) {
						var redPkgMsg = req
						redPkgMsg.pwd = ''
						//console.log(redPkgMsg)
						//组装请求参数
						let msgData = {
							type: that.$chatType.CHAT_GROUP,
							msg: {
								groupId: that.msgObjectData.id,
								senderId: that.userId,
								types: 4, //消息类型 （0文本，1图片连接，2音频，3地图，4红包）
								message: JSON.stringify(redPkgMsg), //消息 
								time: getNowTime() + '',
								groupHead: that.msgObjectData.head,
								groupName: that.msgObjectData.nickname,
								senderHead: that.head,
								senderName: that.nickname,
								state: 0,
								tip: 0,
								redPkgId: redPkgId
							}
						}

						uni.myWebsocket.socketTask.send({
							data: JSON.stringify(msgData),
							async success() {
								//console.log(that.msgObjectData)
								//返回上一页
								return uni.navigateBack(1)
							},
							fail(e) {
								uni.$showMsg('发送失败！');
							}
						});

					}

				})

			},

			//3，websocket连接
			connectSocketInit() {
				// console.log(uni.myWebsocket)
				// console.log(uni.myWebsocket.socketTask.readyState)

				//uni.myWebsocket = ''
				if (uni.myWebsocket == undefined || uni.myWebsocket == '' || uni.myWebsocket == null || uni.myWebsocket
					.socketTask.readyState !== WebSocket.OPEN) {
					//连接上websocket
					uni.$connectSocketInit.connectSocket(uni.$basePort)
				}
			},
		},
		onLoad(e) {
			var msgObject = JSON.parse(e.msgObject)

			this.msgObjectData = msgObject

			if (msgObject.type == 3) {
				this.queryGroupUsers()
			}
			//console.log(msgObject)

			this.connectSocketInit()

			//this.getGroupUsers()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.top-title {
		width: 100%;
		padding: 5rpx 0;
		text-align: center;
		background-color: #B79F67;

		text {
			font-size: 22rpx;
			color: #fff;
		}
	}
</style>